<template>
    <div>
      <el-dialog
        :visible="showDialog"
        :before-close="cancel"
      >
        <el-form ref="form" :model="form" label-width="80px" class="demo-ruleForm" >

          <el-form-item
            prop="imgUrl"
            label="图片地址"
            :rules="[{ required: true, message: '图片地址'}]"
          >
            <el-tooltip content="输入图片链接地址" placement="bottom" effect="light">
              <el-input v-model.string="form.imgUrl" auto-complete="off">{{form.imgUrl}}</el-input>
            </el-tooltip>
          </el-form-item>

          <el-form-item
            prop="imgWidth"
            label="图片宽度"
            :rules="[{ required: true, message: '图片宽度不能为空'}]"
          >
            <el-tooltip content="参考输入规则 100 / 100% / 100px" placement="bottom" effect="light">
              <el-input v-model="form.imgWidth" placeholder="请输入内容" auto-complete="off">{{form.imgWidth}}</el-input>
            </el-tooltip>
          </el-form-item>

          <el-form-item
            prop="xLocation"
            label="x位置"
            :rules="[{ required: true, message: 'x位置不能为空'}]"
          >
            <el-tooltip content="参考输入规则 100 | '100px' | '100%' | 'left/right/center: 100' | 'center'" placement="bottom" effect="light">
              <el-input v-model="form.xLocation" auto-complete="off">{{form.xLocation}}</el-input>
            </el-tooltip>
          </el-form-item>

          <el-form-item
            prop="yLocation"
            label="y位置"
            :rules="[{ required: true, message: 'y位置不能为空'}]"
          >
            <el-tooltip content="参考输入规则 100 | '100px' | '100%' | 'left/right/center: 100' | 'center'" placement="bottom" effect="light">
              <el-input v-model="form.yLocation" auto-complete="off">{{form.yLocation}}</el-input>
            </el-tooltip>
          </el-form-item>

          <el-form-item
            prop="scale"
            label="缩放比例"
            :rules="[{ required: true, message: '缩放比例不能为空'}]"
          >
            <el-input v-model.number="form.scale" auto-complete="off">{{form.scale}}</el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="cancel">取消</el-button>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>



    </div>
</template>


<script>
  export default {
    name: 'Form',
    data() {
      return {

      }
    },
    props:{
      form: {
        imgUrl:'',
        imgWidth:'',
        xLocation:'',
        yLocation:'',
        scale:''
      },
      showDialog:false
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$emit('submit',true)
          } else {
            return false;
          }
        })
      },

      cancel(formName) {
        this.$refs.form.resetFields();
        this.$emit('close', true)
      }

    }
  }
</script>
